import React, {Component} from 'react';
import { Modal, Form, Input,Icon } from 'antd';

const FormItem = Form.Item;

class SignIn extends Component {
	state = {
		visible: false
	}
	showModal = (e) => {
		this.setState({
			visible: true,
		});
	}
	handleOk = (e) => {
		this.setState({
			visible: false,
		});
	}
	handleCancel = (e) => {
		this.setState({
			visible: false,
		});
	}
	render() {
		return(
			<div>
				<div onClick={this.showModal}><Icon type="swap" />切换账号</div>
		        <Modal 
		          title="切换账号"
		          okText="登录"
		          visible={this.state.visible}
		          onOk={this.handleOk}
		          onCancel={this.handleCancel}>
		        	<Form horizontal>
			    		<FormItem
				          label="用户名："
				          labelCol={{ span: 6 }}
				          wrapperCol={{ span: 12 }}>
				          <Input type="text"  placeholder="请输入用户名" />
				        </FormItem>
			    		<FormItem
				          label="密码："
				          labelCol={{ span: 6 }}
				          wrapperCol={{ span: 12 }}>
				          <Input type="password"  placeholder="请输入密码" />
				        </FormItem>
			    	</Form>
		        </Modal>
		    </div>
		)
	}
}

export default SignIn;